// --------------------------------

// (START) Global Editor code https://codyhouse.co/ds/globals/colors

// --------------------------------

:root, [data-theme="default"] {
  // main
  @include defineColorHSL(--color-primary-darker, 331, 32%, 6%);
  @include defineColorHSL(--color-primary-dark, 331, 32%, 12%);
  @include defineColorHSL(--color-primary, 331, 32%, 17%);
  @include defineColorHSL(--color-primary-light, 331, 32%, 24%);
  @include defineColorHSL(--color-primary-lighter, 331, 32%, 32%);

  @include defineColorHSL(--color-accent-darker, 20, 68%, 31%);
  @include defineColorHSL(--color-accent-dark, 20, 68%, 37%);
  @include defineColorHSL(--color-accent, 20, 68%, 44%);
  @include defineColorHSL(--color-accent-light, 20, 68%, 50%);
  @include defineColorHSL(--color-accent-lighter, 20, 68%, 58%);

  @include defineColorHSL(--color-black, 336, 29%, 3%);
  @include defineColorHSL(--color-white, 0, 0%, 100%);

  // feedback
  @include defineColorHSL(--color-warning-darker, 46, 100%, 41%);
  @include defineColorHSL(--color-warning-dark, 46, 100%, 51%);
  @include defineColorHSL(--color-warning, 46, 100%, 61%);
  @include defineColorHSL(--color-warning-light, 46, 100%, 71%);
  @include defineColorHSL(--color-warning-lighter, 46, 100%, 81%);

  @include defineColorHSL(--color-success-darker, 94, 48%, 36%);
  @include defineColorHSL(--color-success-dark, 94, 48%, 46%);
  @include defineColorHSL(--color-success, 94, 48%, 56%);
  @include defineColorHSL(--color-success-light, 94, 48%, 66%);
  @include defineColorHSL(--color-success-lighter, 94, 48%, 76%);

  @include defineColorHSL(--color-error-darker, 349, 75%, 31%);
  @include defineColorHSL(--color-error-dark, 349, 75%, 41%);
  @include defineColorHSL(--color-error, 349, 75%, 51%);
  @include defineColorHSL(--color-error-light, 349, 75%, 61%);
  @include defineColorHSL(--color-error-lighter, 349, 75%, 71%);

  // color contrasts
  @include defineColorHSL(--color-bg, 0, 0%, 100%);
  @include defineColorHSL(--color-contrast-lower, 0, 0%, 95%);
  @include defineColorHSL(--color-contrast-low, 300, 1%, 81%);
  @include defineColorHSL(--color-contrast-medium, 0, 0%, 48%);
  @include defineColorHSL(--color-contrast-high, 330, 3%, 13%);
  @include defineColorHSL(--color-contrast-higher, 336, 33%, 3%);
}

@supports(--css: variables) {
  [data-theme="dark"] {
    // main
    @include defineColorHSL(--color-primary-darker, 88, 32%, 60%);
    @include defineColorHSL(--color-primary-dark, 88, 32%, 68%);
    @include defineColorHSL(--color-primary, 88, 32%, 76%);
    @include defineColorHSL(--color-primary-light, 88, 32%, 86%);
    @include defineColorHSL(--color-primary-lighter, 88, 32%, 92%);

    @include defineColorHSL(--color-accent-darker, 29, 100%, 52%);
    @include defineColorHSL(--color-accent-dark, 29, 100%, 59%);
    @include defineColorHSL(--color-accent, 29, 100%, 66%);
    @include defineColorHSL(--color-accent-light, 29, 100%, 72%);
    @include defineColorHSL(--color-accent-lighter, 29, 100%, 79%);

    @include defineColorHSL(--color-black, 336, 29%, 3%);
    @include defineColorHSL(--color-white, 0, 0%, 100%);

    // feedback
    @include defineColorHSL(--color-warning-darker, 46, 100%, 41%);
    @include defineColorHSL(--color-warning-dark, 46, 100%, 51%);
    @include defineColorHSL(--color-warning, 46, 100%, 61%);
    @include defineColorHSL(--color-warning-light, 46, 100%, 71%);
    @include defineColorHSL(--color-warning-lighter, 46, 100%, 81%);

    @include defineColorHSL(--color-success-darker, 94, 48%, 36%);
    @include defineColorHSL(--color-success-dark, 94, 48%, 46%);
    @include defineColorHSL(--color-success, 94, 48%, 56%);
    @include defineColorHSL(--color-success-light, 94, 48%, 66%);
    @include defineColorHSL(--color-success-lighter, 94, 48%, 76%);

    @include defineColorHSL(--color-error-darker, 349, 75%, 31%);
    @include defineColorHSL(--color-error-dark, 349, 75%, 41%);
    @include defineColorHSL(--color-error, 349, 75%, 51%);
    @include defineColorHSL(--color-error-light, 349, 75%, 61%);
    @include defineColorHSL(--color-error-lighter, 349, 75%, 71%);

    // color contrasts
    @include defineColorHSL(--color-bg, 331, 33%, 17%);
    @include defineColorHSL(--color-contrast-lower, 332, 27%, 20%);
    @include defineColorHSL(--color-contrast-low, 332, 18%, 29%);
    @include defineColorHSL(--color-contrast-medium, 335, 8%, 52%);
    @include defineColorHSL(--color-contrast-high, 330, 7%, 83%);
    @include defineColorHSL(--color-contrast-higher, 330, 5%, 92%);

    // font rendering
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

// --------------------------------

// (END) Global Editor Code

// --------------------------------